<template>

  <div
    id="components-affix-demo-target"
    ref="container"
    class="scrollable-container"
  >
    <div class="background">
      <a-affix :target="() => this.$refs.container">
        <a-button type="primary">
          Fixed at the top of container
        </a-button>
      </a-affix>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {

    }
  },
  created() { },
  mounted() { },
  methods: {

  },
  computed: {}
}
</script>
<style scoped lang='scss'>
#components-affix-demo-target.scrollable-container {
  height: 100vh;
  overflow-y: scroll;
  padding: 20px;
}

#components-affix-demo-target .background {
  padding-top: 60px;
  height: 9000px;
  background-image: url("https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg");
}
</style>
